<template>
  <div class="page-container page-container-detail-page" :style="{height:HEIGHT+'px'}">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员列表详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="page-container-detail">
      <p class="title mb40">会员详情</p>
      <!-- 基本信息 -->
      <div class="tab-container tab-container-noPadding ">
        <el-tabs v-model="active" type="border-card">
          <el-tab-pane label="基本信息" name="1">
            <div>
              <form class="form-horizontal ">
                <el-col :span="12">
                  <div class="form-group">
                    <label class="color333 ml32" >用户账号：</label>
                    <span>{{data.userAccount || "-"}}&nbsp;</span>
                  </div>
                  <div class="form-group">
                    <label class="color333 ml64" >昵称：</label>
                    <div class="color333">{{data.nickName || "-"}}</div>
                  </div>
                  <div class="form-group">
                    <label class="color333 ml64" >头像：</label>
                    <div class="color333"><img :src="data.headImage ? data.headImage : defaultImage" width="100" height="100"/></div>
                  </div>
                  <div class="form-group">
                    <label class="color333 ml48" >手机号：</label>
                    <div class="color333">{{data.phone || "-"}}</div>
                  </div>
                  <div class="form-group">
                    <label class="color333 ml64" >性别：</label>
                    <div v-if="data.sex == 1" class="color333">男</div>
                    <div v-if="data.sex == 2" class="color333">女</div>
                  </div>

                  <div class="form-group">
                    <label class="color333 ml64">会员类型：</label>
                    <div class="color333">{{data.memberType || "-"}}</div>
                  </div>

                  <div class="form-group">
                    <label class="color333 ml64" >用户来源：</label>
                    <div class="color333">{{data.userSource || "-"}}</div>
                  </div>

                  <div class="form-group">
                    <label class="color333 ml64" >年龄：</label>
                    <div class="color333">{{data.age || "-"}}</div>
                  </div>
                  <div class="form-group">
                    <label class="color333 ml64" >生日：</label>
                    <div class="color333">{{data.birth || "-"}}</div>
                  </div>
                  <div class="form-group">
                    <label class="color333 ml64" >邮箱：</label>
                    <div class="color333">{{data.email || "-"}}</div>
                  </div>
                  <div class="form-group" v-if="deptType==0 || deptType==1">
                    <label class="color333" >是否实名认证：</label>
                    <div v-if="data.isAuthentication == '1'" class="color333">是</div>
                    <div v-if="data.isAuthentication == '2'" class="color333">未实名</div>
                    <rows class="searchDialog-input">
                    <el-table
                      v-if="data.isAuthentication == '1'"
                      :data="realNameauthentication">
                      <el-table-column prop="name" label="真实姓名" width="180"></el-table-column>
                      <el-table-column prop="birth" label="出生年月日" width="180"></el-table-column>
                      <el-table-column prop="sex" label="性别" width="100"></el-table-column>
                      <el-table-column prop="idCard" label="身份证号" width="100"></el-table-column>
                    </el-table>
                    </rows>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="form-group" v-if="deptType==0 || deptType==1">
                    <label class="color333 ml16" >微信号：</label>
                    <div class="color333">{{data.wxAccount || "-"}}</div>
                  </div>
                  <div class="form-group" v-if="deptType==0 || deptType==1">
                    <label class="color333" >微信名称：</label>
                    <div class="color333">{{data.wxName || "-"}}</div>
                  </div>
                  <div class="form-group" v-if="deptType==0 || deptType==1">
                    <label class="color333" >微信头像：</label>
                    <div class="color333"><img :src="data.wxImage ? data.wxImage : defaultImage" width="100" height="100"/></div>
                  </div>
                  <div class="form-group">
                    <label class="color333" >注册时间：</label>
                    <div class="color333">{{data.registrationTime || "-"}}</div>
                  </div>
                  <div class="form-group" v-if="deptType==0 || deptType==1">
                    <label class="color333" >会员积分：</label>
                    <div class="color333">{{data.integral || "-"}}</div>
                  </div>
                  <div class="form-group">
                    <label class="color333 ml32" >地区：</label>
                    <div class="color333">{{data.address || "-"}}</div>
                  </div>

                  <div  class="form-group">
                    <label class="color333" >账号状态：</label>
                    <div class="color333">{{data.status==0?"冻结":"正常"}}</div>
                  </div>
                  <div  class="form-group">
                    <label class="color333" >最后登录时间：</label>
                    <div class="color333">{{data.lastLogTime}}</div>
                  </div>
                </el-col>

                <el-row>
                  <el-col>
                    <template>
                      <div>
                        <label class="color333" style="margin-left: 20px">收货地址：</label>
                        <div class="color333">
                          <el-table :data="informationTableData" >
                            <el-table-column prop="consigneeName" label="收货人" width="180"></el-table-column>
                            <el-table-column prop="phone" label="收货电话" width="180"></el-table-column>
                            <el-table-column prop="addressProvinceId" label="省" width="100"></el-table-column>
                            <el-table-column prop="addressCityId" label="市" width="100"></el-table-column>
                            <el-table-column prop="addressRegionId" label="区县" width="155"></el-table-column>
                            <el-table-column prop="addressDetail" label="详细地址" width="250"></el-table-column>
                            <el-table-column prop="isDefault" label="是否为默认" width="150">
                              <template slot-scope="scope">
                                <span v-if="scope.row.isDefault == 1">是</span>
                                <span v-if="scope.row.isDefault == 2">否</span>
                              </template>
                            </el-table-column>
                            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
                          </el-table>
                          <div class="toolbar" style="padding:10px;">
                            <el-pagination
                              layout="total, sizes, prev, pager, next, jumper"
                              @current-change="currentChange"
                              @size-change="sizeChange"
                              :current-page="informationForm.start"
                              :page-size="informationForm.limit"
                              :total="totalSize"
                              style="float:right;"
                              :page-sizes="[10, 20, 30, 40]"
                            ></el-pagination>
                          </div>
                        </div>
                      </div>
                    </template>
                  </el-col>
                </el-row>
              </form>
            </div>
          </el-tab-pane>
          <!-- 会员自定义标签 -->
          <el-tab-pane label="会员自定义标签" name="2" class="text-center" v-if="deptType==2 || deptType==3">
            <CustomTemplate @findCustomPage="findCustomPage" ref="CustomTemplate"></CustomTemplate>
          </el-tab-pane>

          <!-- 会员积分流水 -->
<!--          <el-tab-pane label="会员积分流水" name="4" class="text-center">-->
<!--            <IntegralTemplate @findIntegralPage="findIntegralPage" :userId="id" ref="IntegralTemplate"></IntegralTemplate>-->
<!--          </el-tab-pane>-->

          <!-- 成长值流水 -->
<!--          <el-tab-pane label="成长值流水" name="5" class="text-center">-->
<!--            <GrowthValueTemplate @findGrowthValuePage="findGrowthValuePage" :userId="id"  ref="IntegralTemplate"></GrowthValueTemplate>-->
<!--          </el-tab-pane>-->

          <!-- 消费流水 -->
<!--          <el-tab-pane label="消费记录" name="6" class="text-center">-->
<!--            <ConsumptionTemplate @findConsumptionPage="findConsumptionPage" :userId="id" ref="IntegralTemplate"></ConsumptionTemplate>-->
<!--          </el-tab-pane>-->

          <!-- 用户画像 -->
<!--          <el-tab-pane label="用户画像" name="7" class="text-center">-->
<!--            <CustomPortrait @findCustomPortrait="findCustomPortrait" ref="CustomPortrait"></CustomPortrait>-->
<!--          </el-tab-pane>-->
        </el-tabs>
      </div>
      </div>
    <div>
    </div>
  </div>
</template>

<script>
import IntegralTemplate from "@/views/Pages/PromotionManagement/components/IntegralTemplate";
import ConsumptionTemplate from "@/views/Pages/PromotionManagement/components/ConsumptionTemplate";
import DiscountCardTemplate from "@/views/Pages/PromotionManagement/components/DiscountCardTemplate";
import GrowthValueTemplate from "@/views/Pages/PromotionManagement/components/GrowthValueTemplate";
import ShopTemplate from "@/views/Pages/PromotionManagement/components/ShopTemplate";
import CustomTemplate from "@/views/Pages/PromotionManagement/components/CustomTemplate";
import KtButton from "@/views/Core/KtButton";
import CustomPortrait from "@/views/Pages/PromotionManagement/components/CustomPortrait";
export default {
  components: {
    IntegralTemplate,
    ShopTemplate,
    ConsumptionTemplate,
    DiscountCardTemplate,
    GrowthValueTemplate,
    CustomTemplate,
    KtButton,
    CustomPortrait
  },
  data() {
    return {
      totalSize:0,
      informationTableData:[],
      realNameauthentication:[],
      headList:[],
      informationForm:{
        start:1,
        limit:10,
      },
      loginList:[],
      statusList:[],
      labelShow:false,
      statusTableData:[{
      }],
      filters:{
        start:1,
        limit:10,
      },
      HEIGHT:window.innerHeight,
      thirdUserId: null,
      id: this.$route.params.id,
      templateDialogFormVisible: false, //模板弹窗
      templateForm: {}, //模板model
      size: "small",
      active: "1",
      data: {},
      submitReviewVisible: false, //提交审核弹窗
      reviewVisible: false, //审核弹窗
      auditRemark: null, //审核意见
      skillTimeId: "",
      responseInfoList: [],
      productList: [],
      channelList: [{ childName: "卡奥斯运营平台", id: "179" }],
      deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型
      tableData: [{
        name: '',
        birth: "",
        sex:null,
        idCard: ''
      }],
      defaultImage: require('../../../../static/images/user.png'),
    };
  },
  methods: {
    /**
     * 审核弹
     */
    reviewShow() {
      this.reviewVisible = true;
    },

    //成长值流水
    /*findGrowthValuePage(data) {
      let that = this;
      data.start = 1;
      data.limit = 10;
      data.memberId = this.$route.params.id;
      that.utils.request.getMemberLogList(data, res => {
        if (res.code == "0000") {
          if (null != res.data) {
            that.$router.push({
              path:
                "/GrowthValueTemplate/" + res.data.rows.id + "/" + 1
            });
          } else {
            that.$message({
              message: res.msg || "获取成长值流水信息失败",
              type: "error"
            });
          }
        } else {
          that.$message({
            message: res.msg || "获取成长值流水信息失败",
            type: "error"
          });
        }
      });
    },*/

    //会员自定义标签
    findCustomPage(data) {
      let that = this;
      data.thirdUserId = this.$route.params.id;
      this.utils.request.findGradeInfo(data, res => {
        if (res.code == "0000") {
          if (null != res.data) {
            this.$router.push({
              path: "/CustomTemplate/" + data.row.id + "/" + 1
            });
          } else {
            this.$router.push({
              path: "/CustomTemplate/" + data.row.id + "/" + 1
            });
          }
        } else {
          this.$message({
            message: res.msg || "获取平台会员自定义标签信息失败",
            type: "error"
          });
        }
      });
    },

    findCustomPortrait(data) {
      let that = this;
      data.thirdUserId = that.$route.params.thirdUserId;
      that.$router.push({
        path: "/CustomPortrait/" + data.row.id + "/" + 1
      });
    },

    //消费流水
    /*findConsumptionPage(data) {
      let that = this;
      //data.id = this.$route.params.id;
      data.thirdUserId = that.$route.params.thirdUserId;
      that.utils.request.findIntegralInfo(data, res => {
        if (res.code == "0000") {
          if (null != res.data) {
            that.$router.push({
              path: "/ConsumptionTemplate/" + data.row.thirdUserId + "/" + 1
            });
          } else {
            that.$router.push({
              path: "/ConsumptionTemplate/" + data.row.thirdUserId + "/" + 1
            });
          }
        } else {
          that.$message({
            message: res.msg || "获取成长值流水信息失败",
            type: "error"
          });
        }
      });
    },*/

    //获取积分流水
    // findIntegralPage(data) {
    //   let that = this;
    //   data.id = this.$route.params.id;
    //   data.thirdUserId = this.$route.params.thirdUserId;
    //   this.utils.request.findIntegralInfo(data, res => {
    //     if (res.code == "0000") {
    //       if (null != res.data) {
    //         this.$router.push({
    //           path: "/IntegralTemplate/" + data.row.id + "/" + 1
    //         });
    //       } else {
    //         this.$router.push({
    //           path: "/IntegralTemplate/" + data.row.id + "/" + 1
    //         });
    //       }
    //     } else {
    //       this.$message({
    //         message: res.msg || "获取积分流水信息失败",
    //         type: "error"
    //       });
    //     }
    //   });
    // },

    //获取单个信息
    findPage: function(data) {
      let this_ = this;
      this_.filters.id=this_.id;
      this.utils.request.queryMemberUserList(this_.filters, function(res) {
        if (res.code == "0000") {
          this_.loginList = res.data.rows[0].loginList;
          this_.statusList = res.data.rows[0].statusList;
        }
      });
    },

    //获取基础信息
    findInfo() {
      let this_=this;
      this.utils.request.queryUmeMemberUserInfo({ id: this.$route.params.id }, res => {
        if(res.code == '0000'){
          this_.data = res.data;
          this_.realNameauthentication.push(res.data);
        }

      });
    },
    //获取收货人信息
    findInformation(){
      let this_=this;
      this.informationForm.memberUserId =   this_.id;
      this.utils.request.queryRecipientInformationList(this.informationForm,res=>{
        if(res.code = '0000'){
          this_.informationTableData = res.data.rows;
          this_.totalSize = res.data.total;
        }
      })
    },
    // 换页刷新
    currentChange(pageNum) {
      this.informationForm.start = pageNum;
      this.findInformation();
    },
    sizeChange(pageSize) {
      this.informationForm.start = 1;
      this.informationForm.limit = pageSize;
      this.findInformation();
    },
  },
  mounted() {
    this.findPage();
    this.findInformation();
    this.findInfo();
  }
};
</script>

<style scoped lang="scss">
.page-container-detail{font-size: 16px;}
.form-group{

  display:flex;
  justify-content: flex-start;
  margin-bottom: 30px;
  label{
    width: 120px;
    text-align: right;
  }
}
.tab-container{
  /deep/ .el-tabs__header{
    margin-bottom: 30px !important;
  }
}
.title{
  font-size: 22px;
  color: #333333;
}
/deep/ .w1440{
 width: 1440px;
}
.ml110{
  margin-left: 110px !important;
}
.specialTable{
  position: relative;
  .labelText{
    position: absolute;
    left: 30px;
    top: 0;
  }
  .labelTextLong{
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
